<@override name="content">
    <div class="header">
      <h1 class="page-title">添加比赛</h1>
    </div>
    <ul class="breadcrumb">
      <li>
        <a href="admin">首页</a>
        <span class="divider">/</span>
      </li>
      <li>
        <a href="admin/contest">比赛管理</a>
        <span class="divider">/</span>
      </li>
      <li class="active">添加比赛</li>
    </ul>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="well">
          <div id="container">
            <form class="form-horizontal" action="admin/contest/save" method="post">
              <div class="control-group contest <#if titleMsg??>error</#if>">
                <label class="control-label" for="inputTitle">Title</label>
                <div class="controls">
                  <textarea id="inputTitle" name="contest.title" rows="1" cols="120" required></textarea>
                  <p class="text-error">${titleMsg!}</p>
                </div>
              </div>
              <div class="control-group contest">
                <label class="control-label" for="inputStartTime">Start Time</label>
                <div class="controls input-append date form_datetime" id="startTime">
                  <input size="16" type="text" name="startTime" id="inputStartTime" value="${startDateTime!}" readonly required>
                  <span class="add-on"><i class="icon-th"></i></span>
                </div>
              </div>
              <div class="control-group contest">
                <label class="control-label" for="inputEndTime">End Time</label>
                <div class="controls input-append date form_datetime" id="endTime">
                  <input size="16" type="text" name="endTime" id="inputEndTime" value="${endDateTime!}" readonly required>
                  <span class="add-on"><i class="icon-th"></i></span>
                </div>
              </div>
              <div class="control-group contest">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                  <textarea id="inputDescription" name="contest.description" rows="13" cols="120"></textarea>
                </div>
              </div>
              <div class="control-group contest">
                <label class="control-label" for="inputReport">Report</label>
                <div class="controls">
                  <textarea id="inputReport" name="contest.report" rows="13" cols="120"></textarea>
                </div>
              </div>
              <div class="control-group contest">
                <label class="control-label" for="inputType">Type</label>
                <div class="controls">
                  <select name="contest.type" id="inputType">
                    <option value="0">Public</option>
                    <option value="1">Password</option>
                    <option value="2">Private</option>
                    <option value="3">Strict Private</option>
                    <option value="4">Test</option>
                  </select>
                </div>
              </div>
              <div class="control-group <#if passMsg??>error</#if>" id="password" style="display: none">
                <label class="control-label" for="inputPassword"> Password </label>
                <div class="controls">
                  <div class="input-prepend" id="contest-password"></div>
                  <p class="text-error">${passMsg!}</p>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <label class="checkbox"> <input type="checkbox" name="contest.freeze" value="1">Freeze
                  </label>
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button type="reset" class="btn btn-info">Reset</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
</@override>
  
    <@override name="scripts">
      <link href="assets/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
      <script type="text/javascript" src="assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
      
      <script type="text/javascript">
          $(document).ready(function(){
              $("#inputType").change(function() {
                  var val = $(this).val();
                  if(val == 1) {
                      $("div#password").show();
                      $("div#contest-password").html('<span class="add-on"><i class="icon-lock"></i></span><input type="password" id="inputPassword" name="contest.pass" placeholder="Password" required>');
                  }
                  else {
                    $("div#contest-password").html('');
                      $("div#password").hide();
                  }
              });
          });
      
          $('#startTime').datetimepicker({
              format: "yyyy-mm-dd hh:ii",
              autoclose: true,
              todayBtn: true,
              pickerPosition: "bottom-left",
              //minuteStep: 30
  
          }).on('changeDate', function(ev){
              var time = ev.date.valueOf();
              var date = formatDate(new Date(time + 3600000));
              var endDate = formatDate(new Date(time + 18000000));
              
              $('#inputEndTime').val(endDate);
              $('#endTime').datetimepicker('setStartDate', date);
          });
  
          $("#endTime").datetimepicker({
              format: "yyyy-mm-dd hh:ii",
              autoclose: true,
              todayBtn: true,
              pickerPosition: "bottom-left",
              startDate: "${startDateTime!}",
              //minuteStep: 30
          });
  
          function formatDate(now) {
            var year=now.getUTCFullYear();
            var month=now.getUTCMonth()+1; month = (month < 10 ? '0' : '') + month;
            var date=now.getUTCDate(); date = (date < 10 ? '0' : '') + date;
            var hour=now.getUTCHours(); hour = (hour < 10 ? '0' : '') + hour;
            var minute=now.getUTCMinutes(); minute = (minute < 10 ? '0' : '') + minute;
            return year+"-"+month+"-"+date+" "+hour+":"+minute;
          }
          function getLocalTime(time) {     
             return new Date(time).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
          }
        </script>
     </@override>
<@extends name="../_layout.html"></@extends>
